<template>
  <div>
    <Swiper
      :direction="'vertical'"
      slidesPerView="3"
      :modules="modules"
      observer
      loop
      :autoplay="{
        delay: 1000,
      }"
    >
      <SwiperSlide v-for="item in list" :key="item.id">
        <img :src="item.image" alt="" />
      </SwiperSlide>
    </Swiper>
    <!-- 底部导航 -->
    <myFooter></myFooter>
  </div>
</template>

<script>
import { Pagination, Autoplay } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue'
import 'swiper/swiper-bundle.min.css'
import 'swiper/modules/pagination/pagination.min.css'
import {
  getImages
} from '@/api/Home/request'
import myFooter from '@/components/MyFooter/index'
export default {
  components: {
    Swiper,
    SwiperSlide,
    myFooter
  },
  data: function () {
    return {
      list: [],
      modules: [Pagination, Autoplay]
    }
  },
  created: async function () {
    const { data: res } = await getImages()
    this.list = res
  },
  mounted: function () {
    //
  },
  updated: function () {
    //
  },
  methods: {
    //
  }
}
</script>

<style lang="less" scoped>
.swiper-slide {
  width: 200px;
  height: 100px;
}
</style>
